<template>
  <div class="shou-index">
    <div class="left">
      <!-- <menu1 ref="menu"></menu1> -->
      <side ref="side"></side>
    </div>
    <div class="right">
      <!-- <tree @submenuList="submenuList"></tree> -->
      <router-view></router-view>
      <!-- <div style="color:red;">
        <tableTree></tableTree>
      </div>
      <div>
        <selectTree></selectTree>
      </div> -->
    </div>
  </div>
</template>

<script>
import menu1 from "./menu.vue";
import tree from "./tree.vue";
import side from "../../Sidebar/index.vue";
import tableTree from "./tableTree.vue";
import selectTree from "./selectTree.vue";
export default {
  name: "shou",
  components: { menu1, tree, side, tableTree, selectTree },
  methods: {
    submenuList(tree) {
      this.$nextTick((_) => {
        this.$refs.side.permission_routes = tree;
      });
    },
  },
  created() {
    // let menu = {
    //   id: 0,
    //   title: "tou",
    //   path: "tou",
    //   icon: "tou",
    //   children: data,
    // };
    console.log(this.$store.state.prem_routes);
    this.submenuList(this.$store.state.prem_routes);
  },
  mounted() {
    console.log(this.$router);
  },
};
</script>

<style lang="scss">
.shou-index {
  display: flex;
  .left {
    box-sizing: border-box;
    position: fixed;
    width: 210px;
    height: 100%;
    z-index: 97;
    background-color: rgb(84, 92, 100);
    .el-menu {
      border: 0px;
      .el-menu-item {
        a {
          color: var(--color);
        }
      }
      .el-submenu .el-menu-item {
        height: 50px;
        line-height: 50px;
        padding: 0 45px;
        min-width: 0px;
      }
    }
  }
  .right {
    margin-left: 230px;
    flex: 1;
  }
}
</style>
